<template>
  <div class="container">
    <h2>曼陀罗思考法</h2>
    
    <div class="grid">
      <div 
        v-for="(cell, index) in cells" 
        :key="index"
        class="cell"
        :class="{ 'center': index === 4 }"
      >
        <textarea
          v-model="cell.content"
          :placeholder="getPlaceholder(index)"
          rows="3"
        ></textarea>
        <span class="number" v-if="index !== 4">{{ index + 1 }}</span>
      </div>
    </div>

    <div class="actions">
      <button @click="save">保存</button>
      <button @click="clear">清空</button>
    </div>

    <div class="tips">
      <p>使用说明：</p>
      <ol>
        <li>中心格子（5号）填写核心主题</li>
        <li>周围8个格子填写与主题相关的关键点</li>
      </ol>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const cells = ref(Array(9).fill().map(() => ({ content: '' })))

const getPlaceholder = (index) => {
  return index === 4 ? '核心主题...' : `关键点 ${index + 1}...`
}

const save = () => {
  if (!cells.value[4].content.trim()) {
    alert('请先填写核心主题')
    return
  }
  localStorage.setItem('mandala', JSON.stringify(cells.value))
  alert('保存成功')
}

const clear = () => {
  if (confirm('确定要清空所有内容吗？')) {
    cells.value = Array(9).fill().map(() => ({ content: '' }))
    localStorage.removeItem('mandala')
  }
}

onMounted(() => {
  const saved = localStorage.getItem('mandala')
  if (saved) {
    cells.value = JSON.parse(saved)
  }
})
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.center {
  background: #f0f9ff;
  border: 2px solid #409eff;
}

textarea {
  width: 100%;
  height: 100%;
  padding: 8px;
  border: none;
  resize: none;
  font-size: 14px;
}

textarea:focus {
  outline: none;
}

.number {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #409eff;
  color: white;
  cursor: pointer;
}

button:hover {
  background: #66b1ff;
}

.tips {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

.tips p {
  margin: 0 0 10px 0;
  font-weight: bold;
}

.tips ol {
  margin: 0;
  padding-left: 20px;
}

.tips li {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  .grid {
    gap: 8px;
  }
  
  textarea {
    font-size: 13px;
  }
}
</style> 